<template>
  <van-nav-bar
    left-text=""
    left-arrow
    @click-left="goBack"
    @click-right="showPopup = true"
  >
    <template #title>
      <van-search
        v-model="keyword"
        placeholder="请输入商品名称"
        :clearable="false"
        @search="getListData"
       
      />
    </template>
    <template #right>
      <van-icon name="wap-nav" size="18" />
    </template>
  </van-nav-bar>

  <!-- 下拉菜单 -->
  <van-dropdown-menu>
    <van-dropdown-item
      v-model="flag"
      :options="option1"
      @change="getListData"
    />
    <van-dropdown-item
      v-model="order"
      :options="option2"
      @change="getListData"
    />
  </van-dropdown-menu>
  <div class="mainWarp" style="background: #f3f3f3">
    <ul class="proul">
      <li v-for="item in productlist" :key="item.id">
        <router-link :to="{ path: '/product/info', query: { proid: item.id } }">
          <img :src="item.thumbs_text" />
        </router-link>
        <router-link :to="{ path: '/product/info', query: { proid: item.id } }">
          <p class="tit">
            {{ item.name }}
          </p>
        </router-link>
        <div class="price">
          <p>￥{{ item.price }}</p>
        </div>
      </li>
    </ul>
  </div>
  <div class="clear"></div>
  <div class="h54"></div>
  <van-popup
    v-model:show="showPopup"
    position="right"
    :style="{ width: '30%', height: '100%' }"
  >
    <van-sidebar v-model="active" style="width: 100%;">
      <van-sidebar-item
        :title="item.name"
        v-for="item in typelist"
        :key="item.id"
        @click="changeType(item.id)"
      />
    </van-sidebar>
  </van-popup>
</template>

<script setup>
const goBack = () => {
  history.back();
};
const route = useRoute();
const flag = ref("");
const order = ref("");
const keyword = ref("");
const typeid = ref(route.query.typeid ?? 0);
const typelist = ref([]);
const showPopup = ref(false);
const productlist = ref([]);
const active = ref(0)
const option1 = [
  { text: "全部商品", value: "" },
  { text: "新款商品", value: "1" },
  { text: "热销商品", value: "2" },
  { text: "推荐商品", value: "3" },
];
const option2 = [
  { text: "默认排序", value: "" },
  { text: "价格排序", value: "price" },
  { text: "库存排序", value: "stock" },
];
onBeforeMount(() => {
  getListData();
});
const getListData = async () => {
  let data = {
    flag: flag.value,
    order: order.value,
    keyword: keyword.value,
    typeid: typeid.value,
  };
  let result = await Api.product.productList(data);
  if (result.code == 1) {
    productlist.value = result.data;
  }

  let res = await Api.product.typeIndex();
  if (res.code == 1) {
    typelist.value = res.data;
    typelist.value.unshift({
        id: 0,
        name: '全部商品'
    });
    typelist.value.forEach((item,index) => {
      if(item.id == typeid.value) {
        active.value= index
      }
    });
  }
};
const changeType = (id) =>{
    showPopup.value = false;
    typeid.value = id
    getListData();
}
// 清除搜索框
const clearSearch = () => {
  keyword.value = "";
  getListData();
};
</script>

<style lang="scss" scoped>
.van-nav-bar .van-ellipsis {
  width: 85%;
}
.van-nav-bar__title {
  max-width: 100%;
}
.mainWarp .proul li  a {
		img {
			width: 100%;
			height: 94px;
			object-fit: cover;
		}
	}
</style>